<template>
    <div class="home" ref="home">
            <router-view></router-view>
        <div class="footer-tab">
            <div class="box">
                <van-tabs v-model="active" title-active-color="#f39d6b" title-inactive-color="#b1b3c2" type="cards">
                    <van-tab v-for="(item, index) in footerItem" :key="index" :name="item.alias">
                        <template #title>
                            <div class="icon-flag" style="padding-bottom: 4px">
                                <span v-if="active === 'system'" :class="item.iconActive"></span>
                                <span v-else :class="item.icon"></span>
                            </div>
                            <span class="text">{{ item.name }}</span>
                        </template>
                    </van-tab>
                </van-tabs>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "home",
        data() {
            return {
                active: 'system',
                footerItem: [
                    {
                        name: '发现',
                        alias: 'discover',
                        icon: 'iconfont icon-xiaoxi2',
                        iconActive: 'iconfont icon-xiaoxi2'
                    },
                    {
                        name: '学习体系',
                        alias: 'system',
                        icon: 'iconfont icon-zhongxin',
                        iconActive: 'iconfont icon-zhongxin1',
                    },
                    {
                        name: '我的',
                        alias: 'mine',
                        icon: 'iconfont icon-wode1',
                        iconActive: 'iconfont icon-wode1'
                    }
                ]
            }
        },
        methods: {
            /*
            * 防止第一次进来或路由地址变化的时候路由地址和 tabs 或路由变化时 不匹配
            * */
            getRoutePath() {
                this.active = this.$route.path.replace(/\/home\//g, '')
            }
        },
        mounted() {
            this.getRoutePath()

            // this.$refs.home.onscroll = () => {
            //     if (this.timeout) clearTimeout(this.timeout)
            //     this.timeout = setTimeout(() => {
            //         this.$route.meta.y = this.$refs.home.scrollTop;
            //     }, 300)
            // }


        },
        watch: {
            // 监听当前 footer tabs 的切换 并与路由地址相匹配
            'active': function (routePath) {
                this.$router.push({
                    path: routePath,
                    name: routePath
                })
            },
            '$route': 'getRoutePath'
        },
        components: {}
    }
</script>

<style lang="scss" scoped>
    .home {
        background-color: #ecf5ff;
        width: 100%;
        /*height: 100%;*/
        /*position: relative;*/
        /*overflow: auto;*/

        .footer-tab {
            min-height: 46px;
            line-height: 46px;
            padding: 10px 0;
            width: 100%;
            position: fixed;
            left: 0;
            bottom: 0;
            background-color: white;
            .box {
                transform: translateY(10%);
                height: 100%;

                .text {
                    font-size: 12px;
                }
            }
        }
    }
</style>
<style>
    .van-tab {
        line-height: 1;
    }
</style>